<script type="text/x-template" id="ai-poster-list">
    <div>
        <cc-page-wrapper :page="page"
                         :search="searchForm"
                         @filter-change="handleFilterChange"
                         @filter-reset="handleFilterReset"
        >
            <div slot="search">
                <el-form-item style="display: inline-block" label="自增ID">
                    <el-input v-model="searchForm.id" clearable></el-input>
                </el-form-item>
                <el-form-item style="display: inline-block" label="海报标签">
                    <el-input v-model="searchForm.poster_label" clearable></el-input>
                </el-form-item>
                <el-form-item style="display: inline-block" label="海报名称">
                    <el-input v-model="searchForm.poster_name" clearable></el-input>
                </el-form-item>
            </div>
            <cc-card-list slot="content" class="img-list"
                          :data="tableData"
                          :selected="selected"
                          :selection-type="selectionType"
                          :select-on-row-click="true"
                          @row-selection-add="handleRowSelectionAdd"
                          @row-selection-remove="handleRowSelectionRemove">
                <div class="img-item" slot="row" slot-scope="{row: item}">
                    <img referrerpolicy="no-referrer" :key="item.poster_url" :src="item.poster_url"/>
                    <a class="img-preview" @click.stop="reviewPic(item)">预览</a>
                    <a class="img-rls-preview " @click.stop="reviewRlsPoster(item)">相关海报</a>
                    <div class="img-detail">
                        <span>海报id：{{ item.id }}</span>
                        <span>海报标签: {{ item.poster_label }}</span>
                        <span>分辨率：{{ item.poster_resolution }}</span>
                    </div>
                    <div class="img-info">
                        <span class="img-title">{{ item.poster_name }}</span>
                    </div>
                </div>
            </cc-card-list>

        </cc-page-wrapper>

        <el-dialog title="预览" :visible.sync="picDialogVisible" width="60%">
          <span class="pics">
            <img referrerpolicy="no-referrer" :src="reviewPicUrl" alt="图片" max-width="500">
          </span>
            <span slot="footer" class="dialog-footer">
            <el-button @click="picDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="picDialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>

        <el-dialog title="相关海报" :visible.sync="posterDialogVisible" width="1080px">
            <el-carousel :interval="5000" width="100%" height="600px">
                <el-carousel-item v-for="item in posterUrlList" :key="item">
                    <cc-poster-show :src="item"></cc-poster-show>
                </el-carousel-item>
            </el-carousel>
        </el-dialog>
    </div>
</script>

<script>
    Vue.component('ai-poster-list', {
        template: '#ai-poster-list',
        data: function () {
            return {
                posterDialogVisible: false,
                posterUrlList: [],
                posterLabelUrlList: [],
                searchForm: {},
                pagination: {},
                selected: [],
                selectionType: 'multiple',
                urls: {
                    //分页数据接口
                    pageList: '/v1/aiPoster/pageList.html',
                },
                loading: true,
                picDialogVisible: false, // 预览图片弹出框
                reviewPicUrl: null,
                tableLoading: false,
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 10 // 每页显示多少条
                },
                tableData: [
                    {
                        img: 'http://172.20.154.101/img/test/20200421/2020042115041587454317105211_1920*1080.jpg',
                        img1: [{
                            label: '迪丽热巴_1:45',
                            value: 'http://172.20.154.101/img/test/20200421/2020042115041587454319220265_1920*1080.jpg',
                        }, {
                            label: '迪丽热巴_22:30',
                            value: 'http://172.20.154.101/img/test/20200421/2020042115041587454325056002_1920*1080.jpg',
                        }, {
                            label: '迪丽热巴_34:14',
                            value: 'http://172.20.154.101/img/test/20200421/2020042115041587454327626315_1920*1080.jpg',
                        }],
                        img2: ['http://172.20.154.101/img/test/20200421/2020042115041587454317105211_1920*1080.jpg', 'http://172.20.154.101/img/test/20200421/2020042115041587454319105466_1920*1080.jpg', 'http://172.20.154.101/img/test/20200421/2020042115041587454322443120_1920*1080.jpg']
                    }
                ],
                option: {
                    index: false,
                    page: true,
                    align: 'center',
                    menu: false,
                    menuAlign: 'center',
                    addBtn: false,
                    editBtn: false,
                    delBtn: false,
                    column: [
                        {
                            label: '自增ID',
                            prop: 'id',
                            width: '100',
                            search: true,
                            visdiplay: false
                        },
                        {
                            label: '海报标签',
                            prop: 'poster_label',
                            width: '120',
                            span: 24,
                            search: true
                        },
                        {
                            label: '海报',
                            prop: 'poster_url',
                            type: 'upload',
                            imgWidth: 400,
                            listType: 'picture-img'
                        }, {
                            label: 'JSON图片-带标签',
                            prop: 'poster_label_value_list',
                            type: 'upload',
                            imgType: 'card',
                            listType: 'picture-card',
                            span: 24,
                        }, {
                            label: '多张海报',
                            prop: 'poster_list',
                            type: 'upload',
                            imgFullscreen: true,
                            dataType: 'array',
                            listType: 'picture-card',
                            imgType: 'box',
                            span: 24,
                        }
                    ]
                }
            };
        },
        created: function () {

        },
        methods: {
            resetForm() {
                this.$refs.searchForm.resetFields();
                this.page.currentPage = 1
                this.page.pageSize = 10
            },
            reviewPic(row) {
                this.reviewPicUrl = row.poster_url
                this.picDialogVisible = true
            },
            reviewRlsPoster(row){
                this.posterUrlList = row.poster_list
                this.posterLabelUrlList = row.poster_label_value_list
                this.posterDialogVisible = true
            },
            handleSearch: function (searchForm) {
                this.searchForm = searchForm;
                this.tableLoading = true;
                var searchParams = this.getSearchParams(searchForm);
                searchParams.page = this.page.currentPage;
                searchParams.rows = this.page.pageSize;
                this.ajax(this.urls.pageList, searchParams
                        , function (data) {
                            if (data.code === '0') {
                                this.tableData = data.data.rows
                                this.page.total = data.data.total
                                this.tableLoading = false
                            } else {
                                this.tableData = [];
                                this.tableLoading = false;
                            }
                        }.bind(this));
            },
            handleRefresh() {

            },
            handleRowSelectionAdd() {

            },
            handleRowSelectionRemove() {

            },

            handleSize(pageSize) {
                this.page.pageSize = pageSize;
                this.handleSearch(this.searchForm);
            },
            handlePageChange(currentPage) {
                this.page.currentPage = currentPage;
                this.handleSearch(this.searchForm);
            },
            handleRowClick(currentRow) {
//                        this.reviewPicUrl = currentRow.poster_url
//                        this.picDialogVisible = true
            },
            handleFilterChange(type,filter) {
                this.handleSearch(this.searchForm)
            },
            handleFilterReset() {
                this.searchForm = {}
                this.$set(this.page, 'currentPage', 1)
                this.$set(this.page, 'pageSize', 10)
            },
            loadPageData() {
                this.tableLoading = true;
                this.ajax(this.urls.pageList, {}, function (data) {
                    if (data.code === '0') {
                        this.tableData = data.data.rows
                        this.page.total = data.data.total
                        this.tableLoading = false

                    } else {
                        this.tableData = [];
                        this.tableLoading = false;
                    }
                }.bind(this));
            }
        }
        ,
        mounted: function () {
            this.loadPageData()
        }
    })
</script>

<style>
    .pics img {
        max-width: 500px;
        max-height: 500px;
    }

    .img-list {
        width: 1340px;
    }

    .img-list .img-item {
        position: relative;
        width: 255px;
        height: 255px;
        border: 1px solid #ccc;
        margin: 0 10px 10px 0;
    }

    .img-list .img-item img {
        max-width: 100%;
        max-height: 50%;
    }

    .img-list .img-item .img-detail {
        position: absolute;
        bottom: 20px;
        text-align: center;
        opacity: 0.8;
        background: #f5f5f5;
        width: 100%;
        display: none;
    }

    .img-list .img-item .img-detail span {
        display: block;
    }

    .img-list .img-item:hover .img-detail {
        display: block;
    }

    .img-list .img-item .img-info {
        position: absolute;
        bottom: 0;
        height: 20px;
        width: 100%;
        background: #000;
        color: #fff;
        opacity: 0.8;
    }

    .img-list .img-item .img-title {
        display: inline-block;
        overflow: hidden;
        width: 130px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .img-list .img-item .img-preview {
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        height: 20px;
        border: 1px solid #ccc;
        color: #444;
        background: #fff;
        padding: 0px 5px;
    }

    .img-list .img-item .img-rls-preview {
        position: absolute;
        top: 120px;
        right: 0;
        cursor: pointer;
        height: 20px;
        border: 1px solid #ccc;
        color: #444;
        background: #fff;
        padding: 0px 5px;
    }

</style>